<template>
  <div><!-- 加个空节点解决组件无限循环 -->
    <!-- 单项 -->
    <el-menu-item v-if="!v.children || v.children.length <= 0" :index="v.path">
      <i :class="v.meta.icon"></i>
      <span slot="title">{{ v.meta.title }}</span>
    </el-menu-item>
    <!-- 层级 -->
    <el-submenu v-else :index="v.path">
      <template slot="title">
        <i v-if="v.meta.icon" :class="v.meta.icon"></i>
        <span slot="title">{{ v.meta.title }}</span>
      </template>
      <AsideItem v-for="val in v.children" :key="val.path" :v="val" />
    </el-submenu>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "AsideItem",
  props: {
    v: {
      type: Object,
      required: true,
    },
  },
  computed:{
    ...mapState({
      isCollapse: (state) => state.isCollapse, //左边导航栏是否收起
    }),
  }
};
</script>

<style>
.el-menu-vertical-demo.el-menu--collapse.el-menu .el-submenu .el-submenu__title span,
.el-menu-vertical-demo.el-menu--collapse.el-menu .el-submenu.is-active .el-submenu__title span{
  display: none;
}
</style>